---
title: 'Chrome Extension Samples'
description: >
  The list contains all the samples from the [Extensions sample repository](https://github.com/GoogleChrome/chrome-extensions-samples). Use these to learn how extensions work or as a starting point for building your own extensions.
---

{% extends "layouts/base.njk" %}

{% block css %}
  {% InlineCss '/css/extension-samples.css' %}
{% endblock %}

{% block title_bar %}
  {% set sharingEnabled = true %}
  {% include 'partials/breadcrumbs.njk' %}
{% endblock %}

{% from 'macros/cards/hero-card.njk' import heroCard with context %}
{% from 'macros/icon.njk' import icon with context %}

{% set checkboxGroupI18n = {
  reset: 'i18n.common.checkbox_group.reset' | i18n,
  select_all: 'i18n.common.checkbox_group.select_all' | i18n
} %}

{% set typeLabel = 'i18n.extension_samples.type' | i18n %}
{% set apiLabel = 'i18n.extension_samples.api' | i18n %}
{% set permissionLabel = 'i18n.extension_samples.permission' | i18n %}

{% block content %}
  <div class="display-flex gap-top-300 lg:gap-top-400">
    {% include 'partials/navigation-tree.njk' %}
    <div class="extension-samples-container width-full pad-left-400 pad-right-400">
      <div class="pad-bottom-400">
        {{ heroCard(
        title,
        description
      ) }}
      </div>
      <div class="extension-samples-container__filters align-center no-js">
        <div class="search-box__inner" role="presentation">
          <span class="search-box__btn">
            {{ icon('search', {hidden: false}) }}
          </span>
          <input
            id="search-extension-samples"
            class="search-box__input"
            placeholder="{{ 'i18n.extension_samples.search_samples' | i18n(locale) }}"
            aria-label="{{ 'i18n.extension_samples.search_samples' | i18n(locale) }}"
            aria-autocomplete="list"/>
          <span class="search-box__btn search-box__btn--close" id="search-extension-samples-close">
            {{ icon('close', {hidden: false}) }}
          </span>
        </div>

        <span class="color-secondary-text type--eyebrow gap-left-300">
          {{ 'i18n.common.filter_by' | i18n }}:
        </span>

        <enhanced-select class="gap-right-300 samples-filter"
                         label="{{ typeLabel }}"
                         fixedLabel>
          <select name="types" multiple>
            {% for type, friendlyType in extensionSamples.sampleTypes %}
              <option value="{{ type }}">{{ friendlyType }}</option>
            {% endfor %}
          </select>
        </enhanced-select>
        <enhanced-select class="gap-right-300 samples-filter"
                         label="{{ permissionLabel }}"
                         fixedLabel>
          <select name="permissions" multiple>
            {% for permission in extensionSamples.availablePermissions %}
              <option value="{{ permission }}">{{ permission }}</option>
            {% endfor %}
          </select>
        </enhanced-select>
        <enhanced-select class="gap-right-300 samples-filter"
                         label="{{ apiLabel }}"
                         fixedLabel>
          <select name="apis" multiple>
            {% for api in extensionSamples.availableAPIs %}
              <option value="{{ api }}">{{ api | replace("_", ".") }}</option>
            {% endfor %}
          </select>
        </enhanced-select>

      </div>

      <dialog id="mobile-filters" class="scrollbar lg:display-none">
        <div class="filter-sheet display-flex direction-column">
          <p class="filter-sheet__title type--xsmall weight-medium case-upper">
            {{ 'i18n.common.filter_by' | i18n(locale) }}
          </p>

          <div class="filter-sheet__filters">
            <section class="gap-bottom-500">
              <p class="type--h5 weight-medium gap-bottom-200">{{ typeLabel }}</p>
              <checkbox-group show="4" i18n='{{ checkboxGroupI18n|dump|safe }}'>
                {% for type, friendlyType in extensionSamples.sampleTypes %}
                  <label>
                    <input type="checkbox" name="types" value="{{ type }}"/>
                    {{ friendlyType }}
                  </label>
                {% endfor %}
              </checkbox-group>
            </section>

            <section class="gap-bottom-500">
              <p class="type--h5 weight-medium gap-bottom-200">{{ permissionLabel }}</p>

              <checkbox-group show="4" i18n='{{ checkboxGroupI18n|dump|safe }}'>
                {% for permission in extensionSamples.availablePermissions %}
                  <label>
                    <input type="checkbox" name="permissions" value="{{ permission }}"/>
                    {{ permission }}
                  </label>
                {% endfor %}
              </checkbox-group>
            </section>

            <section class="gap-bottom-500">
              <p class="type--h5 weight-medium gap-bottom-200">{{ apiLabel }}</p>

              <checkbox-group show="4" i18n='{{ checkboxGroupI18n|dump|safe }}'>
                {% for api in extensionSamples.availableAPIs %}
                  <label>
                    <input type="checkbox" name="apis" value="{{ api }}"/>
                    {{ api | replace("_", ".") }}
                  </label>
                {% endfor %}
              </checkbox-group>
            </section>
          </div>

          <div
            class="filter-sheet__buttons display-flex align-center justify-content-end"
          >
            <button id="mobile-filters-reset"
                    class="material-button button-filled color-primary bg-white">
              {{ 'i18n.common.checkbox_group.reset'|i18n }}
            </button>

            <button id="mobile-filters-done"
                    class="material-button button-filled color-bg bg-primary">
              {{ 'i18n.extension_samples.done'|i18n }}
            </button>
          </div>
        </div>
      </dialog>

      <div class="selected-filters display-flex flex-flow-row-wrap grid-gap-100 gap-top-100 no-js">
        <span id="mobile-filters-opener"
            class="mobile-filters-btn surface color-blue-medium hairline rounded-lg tag-pill type--small display-inline-flex align-center">
          {{ icon('filters') }}
          {{ 'i18n.extension_samples.filters' | i18n(locale) }}
        </span>

        <tag-pill-list id="active-filters"></tag-pill-list>
      </div>

      <div class="samples-list gap-top-300 no-js">
        {% for sample in extensionSamples.samples %}
          {% include 'partials/extension-sample-item.njk' %}
        {% endfor %}
      </div>
    </div>
  </div>
{% endblock %}

{% block scripts %}
  <script type="module" src="{{ helpers.hashForProd('/js/extension-samples.js') }}"></script>
  <script type="application/json" id="extension-samples-data">
    {{ extensionSamples.samplesKeyedByName | dump | safe }}
  </script>
{% endblock %}
